import React, { FC, useState } from 'react'
import { accountType } from '@/api/global/interface'
import { StyledWrap } from './style'
import avatar_24x24 from '@/assets/avatar/avatar_24x24.png'
import avatar_32x32 from '@/assets/avatar/avatar_32x32.png'
import avatar_64x64 from '@/assets/avatar/avatar_64x64.png'
import avatar_128x128 from '@/assets/avatar/avatar_128x128.png'
import meeting_room_24x24 from '@/assets/avatar/meeting_room_24x24.png'
import meeting_room_32x32 from '@/assets/avatar/meeting_room_32x32.png'
import meeting_room_64x64 from '@/assets/avatar/meeting_room_64x64.png'
import meeting_room_128x128 from '@/assets/avatar/meeting_room_128x128.png'

interface KImagProps {
	src: string
	size?: number
	accountType: accountType
}
/*
声明为 Never 类型表示永远不存在的值的类型。

Never 类型可以用来表示会抛出异常或根本不会有返回值的函数表达式或箭头函数表达式的返回值类型；
被永不为真的类型保护所约束时的变量也可用 Never 来表示。
*/
/*
const accountType = value.accountType !== undefined ? value.accountType : value.account_type

字段后端返回的不一样

AvatarProps 是一个联合类型，它包含两种不同的对象结构。
第一种结构中，value 属性包含 accountType 和可选的 portrait 和 isOnline。
第二种结构中，value 属性包含 account_type（注意下划线）和可选的 portrait 和 isOnline，但是 accountType 是 never 类型，这意味着它不应该被使用。
两种结构都包含一个可选的 size 属性。
使用的时候，代码片段通过类型守卫来确定 value 对象中 accountType 的存在性：

const accountType = value.accountType !== undefined ? value.accountType : value.account_type;
这段代码的逻辑是：

首先检查 value.accountType 是否存在且不是 undefined。
如果 value.accountType 存在，就使用它。
如果 value.accountType 不存在，就回退到 value.account_type。
这种设计允许 AvatarProps 类型处理两种不同的属性命名约定，同时确保使用时能够正确地获取 accountType 的值。
这在处理不同来源的数据或在迁移旧代码到新代码时非常有用，因为它提供了灵活性和向后兼容性。
*/
type AvatarProps =
	| {
			value: {
				accountType: accountType
				portrait?: string
				isOnline?: boolean
			}
			size?: number
	  }
	| {
			value: {
				accountType?: never
				account_type: accountType
				portrait?: string
				isOnline?: boolean
			}
			size?: number
	  }
//获取默认头像地址
function getDefaultAvatarUrl(accountType: accountType, size: number): string {
	if (accountType === 2) {
		switch (size) {
			case 24:
				return meeting_room_24x24
			case 32:
				return meeting_room_32x32
			case 64:
				return meeting_room_64x64
			case 128:
				return meeting_room_128x128
			default:
				return meeting_room_32x32
		}
	} else {
		switch (size) {
			case 24:
				return avatar_24x24
			case 32:
				return avatar_32x32
			case 64:
				return avatar_64x64
			case 128:
				return avatar_128x128
			default:
				return avatar_32x32
		}
	}
}

/*
interface KImagProps {
	src: string
	size?: number
	accountType: accountType
}
*/
const KImg: FC<KImagProps> = ({ src, size = 32, accountType }) => {
	/*
	imgSrc 头像地址
	*/
	const [imgSrc, setImgSrc] = useState<string>(src)
	/*
	img 在 onError的时候，给默认组件
	getDefaultAvatarUrl  获得默认图片地址
	*/
	const onError = () => {
		if (imgSrc === getDefaultAvatarUrl(accountType, size)) return
		setImgSrc(getDefaultAvatarUrl(accountType, size))
	}
	return <img src={imgSrc} alt="" onError={onError} />
}
/*
Avatar 头像组件
*/
export const Avatar: FC<AvatarProps> = ({ value, size }) => {
	const { portrait, isOnline = true } = value
	const accountType = value.accountType !== undefined ? value.accountType : value.account_type
	return (
		<StyledWrap
			hasAvatar={!!portrait}
			isMeeting={accountType === 10}
			isRoom={accountType === 2}
			size={size}
			isOnline={isOnline}
		>
			{!!portrait && <KImg src={portrait} accountType={accountType} size={size} />}
		</StyledWrap>
	)
}
